<template>
  <div>
    <div id="prochart"></div>
  </div> 
</template>

<script setup>
    import {ref,onMounted} from 'vue'
    import * as echarts from 'echarts';
    
    onMounted(()=>{
        makeProChart();
    })
    let makeProChart=()=>{
      let mycharts=echarts.init(document.getElementById("prochart"))

      // 准备配置项
      let option = {
  title: {
    text: '报警排名（top8）'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    show:false
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
      axisTick:{
          show:false // 不显示坐标轴刻度线
    },
    splitLine:{
      show:false
    },
    axisLine: {
          show: false, // 不显示坐标轴线
    }

  },
  yAxis: {
    type: 'category',
    data: ['岳阳', '三亚', '阜阳', '三峡', '新界', '萍乡'],
    splitLine:{
      show:false
    },
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    }
  ]
      }
      // 3 设置给操作对象
      mycharts.setOption(option)
};

</script>
<style lang="less" scoped>
    #prochart{
        width: 450px;
       height: 300px;
    }
</style>